<template>
  <div class="body">
    <div class="title">
      <p id="card3-left-text1">{{ $t('card3.title1') }}</p>
    </div>
    <div class="card3">
      <div class="card3-left">
        <div class="card3-left-text">
          <div id="card3-left-text2-container">
            <span class="vertical-line1"></span>
            <p id="card3-left-text2">{{ $t('card3.title2') }}</p>
          </div>
          <div id="card3-left-text2-container">
            <span class="vertical-line2"></span>
            <p id="card3-left-text3">{{ $t('card3.description') }}</p>
          </div>
        </div>

        <div class="card3-left-ph">
          <PieChart1 ref="pieChart1" class="chart"/>
          <PieChart2 ref="pieChart2" class="chart"/>
        </div>

      </div>
      <div class="card3-right">
        <div class="card3-right-box">
          <div class="num" ref="num1">
            10000+
          </div>
          <div class="card3-right-text">
            {{ $t('card3.inIncubation') }}
          </div>
        </div>
        <div class="card3-right-box">
          <div class="num" ref="num2">
            1000+
          </div>
          <div class="card3-right-text">
            {{ $t('card3.industryExperts') }}
          </div>
        </div>
        <div class="card3-right-box">
          <div class="num" ref="num3">
            100+
          </div>
          <div class="card3-right-text">
            {{ $t('card3.coveredFields') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {CountUp} from 'countup.js'; // 引入 CountUp 库，用于数字滚动效果
import {useI18n} from 'vue-i18n'; // 引入 useI18n 钩子，用于国际化支持
import {watch} from 'vue';
import PieChart1 from "@/components/AboutUs/PieChart1.vue";
import PieChart2 from "@/components/AboutUs/PieChart2.vue"; // 引入 Vue 的生命周期钩子和 watch 函数

export default {
  name: 'MyCard3',
  components: {PieChart2, PieChart1},
  methods: {
    // 启动数字滚动效果的函数
    startCountUp() {
      // 设置 CountUp 动画的选项
      const options1and2 = {
        duration: 7, // 动画持续时间
        formattingFn: (num) => `${num}+`, // 数字格式化函数
      };
      const options3 = {
        duration: 8.9, // 动画持续时间
        formattingFn: (num) => `${num}+`, // 数字格式化函数
      };

      // 创建 CountUp 实例并启动
      const num1 = new CountUp(this.$refs.num1, 10000, options1and2);
      const num2 = new CountUp(this.$refs.num2, 1000, options1and2);
      const num3 = new CountUp(this.$refs.num3, 100, options3);

      // 检查是否有错误并启动动画
      if (!num1.error) num1.start();
      if (!num2.error) num2.start();
      if (!num3.error) num3.start();
    },
  },
  setup() {
    // 使用 useI18n 钩子获取当前语言
    const {locale} = useI18n();

    // 更新样式的函数，根据语言改变样式
    const updateStyles = (lang) => {
      if (lang === 'en') {
        // 如果语言是英文，调整样式
        document.querySelector('.vertical-line1').style.height = '1.8vw';
        document.querySelector('.vertical-line2').style.height = '2.6vw';
        document.querySelector('#card3-left-text2').style.fontSize = '2.9vw';
        document.querySelector('#card3-left-text3').style.fontSize = '1.4vw';
      } else {
        //如何删掉这段代码的话则会造成样式固定导致无法切换回来
        document.querySelector('.vertical-line1').style.height = '2.2vw';
        document.querySelector('.vertical-line2').style.height = '0.6vw';
        document.querySelector('#card3-left-text2').style.fontSize = '3vw';
        document.querySelector('#card3-left-text3').style.fontSize = '1.6vw';
      }
    };

    // 监听语言变化，当语言变化时更新样式
    watch(() => locale.value, (newLang) => {
      updateStyles(newLang);
    });

  },
};
</script>


<style scoped>
.body {
  width: 100%;
  height: 100%;
  border-radius: 2%;
  padding: 20px;
  box-sizing: border-box;
  background: url("@/assets/background3.png"); /* 添加背景图片 */
  background-size: cover; /* 确保背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  font-family: "STSong", "华文中宋", serif;
}

.title {
  height: 10%;
  display: flex;
  justify-content: center;
  font-family: "STSong", "华文中宋", serif;
}

.card3 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  padding: 20px;
  box-sizing: border-box;
  background-size: cover; /* 确保背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  font-family: "STSong", "华文中宋", serif;
}

.chart {
  flex: 1;
  margin-right: 3%;
  background: none; /* 确保没有背景图片影响显示 */
}

.card3-left {
  padding-top: 30px;
  width: 65%;
  height: 100%;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  font-family: "STSong", "华文中宋", serif;
}

.card3-right {
  width: 50%;
  height: 100%;
  padding-left: 10%;
  font-family: "STSong", "华文中宋", serif;
}

.card3-left-text {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
  font-family: "STSong", "华文中宋", serif;
}

#card3-left-text1 {
  font-size: 3vw;
  text-align: right;
  margin-bottom: 10px;
  font-weight: 1000;
  color: #0C2785;
}

#card3-left-text2-container {
  display: flex;
  align-items: center;
  margin: 0;
  margin-bottom: 1.5vh;
}

.vertical-line1 {
  width: 0.6vw;
  height: 2.2vw;
  background-color: #2E75C9;
  margin-right: 10px;
}

.vertical-line2 {
  width: 0.6vw;
  height: 0.6vw;
  background-color: black;
  margin-right: 10px;
}

#card3-left-text2 {
  font-size: 3vw;
  margin: 0;
  color: #2E75C9;
}

#card3-left-text3 {
  font-size: 1.6vw;
  margin: 0;
  text-align: left;
}

.card3-left-ph {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 105%;
  height: 70%;
}

.card3-left-ph img {
  width: 100%;
  height: 100%;
}

.card3-right-box {
  margin-top: 10px;
  width: 90%;
  height: 22%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 3px solid rgb(206, 206, 206);
}

.num {
  font-size: 4vw;
  font-weight: bolder;
  background: linear-gradient(to right, #498fff, #42dcf4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card3-right-text {
  font-size: 1.5vw;
}

</style>

